<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <link rel="stylesheet" href="index.css">
    <script>
        function $(id) {
            return document.getElementById(id)
        }
        window.onload=function () {
            setLoginInfo();
            fullTable();
        }

        function setLoginInfo() {
            axios.get("/user/getLoginUser").then(resp=>{
                if (resp.data == ''){
                    $("loginSpan").innerHTML="你好，请先<a href='/html/login.html'>登录</a>";
                }
                else {
                    $("loginSpan").innerHTML="欢迎光临，"+resp.data.userName;
                    $("exitDiv").innerHTML="<a href='javascript:getDetorySession()' style='margin-left: 50px'>退出登录</a>";
                }
            });
        }

        function getDetorySession() {
            axios.get("/user/detorySession").then(resp=>{
                if (resp.data=='ok'){
                    setLoginInfo();
                }
            })
        }

        function fullTable() {
            axios.get("/book/findAll").then(resp=>{
                var str = "";
                resp.data.forEach(n=>{
                    str += `<tr><td>${n.name}</td><td>${n.auth}</td>
                <td>${n.price}</td><td><input type="button" value="查看" onclick="findById(${n.id})"></td></tr>`
                });
                $("bookData").innerHTML = str;
            });
        }
        function findById(id) {
            $("showDiv").style.visibility="visible";
            $("showDiv").style.width = document.documentElement.clientWidth+"px";
            $("showDiv").style.height = document.documentElement.clientHeight+"px";
            axios.get("/book/findById",{
                params: {
                    id:id
                }
            }).then(resp=>{
                var bookObj = resp.data;
                $("bookId").value= bookObj.id;
                $("nameSpan").innerHTML =bookObj.name;
                $("authSpan").innerHTML= bookObj.auth;
                $("priceSpan").innerHTML= bookObj.price;
                $("bookImg").src="/html/img/"+bookObj.imgPath;
                var str = "";
                bookObj.speakList.forEach(e =>{
                    str += `<tr><td>${e.user.userName}</td><td>${e.content}</td>
                            <td>${e.speakDate}</td></tr>`
                })
                $("speakData").innerHTML=str;

            });

        }
        function addSpeak() {
            axios.get("/speak/add",{
                params: {
                    bookId:$("bookId").value,
                    content:$("speakContent").value
                }
            }).then(resp=>{
                if (resp.data=="noLogin"){
                    location.href="/html/login.html";
                }
                 else if (resp.data=="ok"){
                    findById($("bookId").value)
                }

            })
        }

    </script>
</head>
<body>
    <div style="display: flex">
        <span id="loginSpan"></span>
        <div id="exitDiv"></div>
    </div>
    <table border="1" width="60%" cellspacing="0">
        <thead>
            <tr><th>书名</th><th>作者</th><th>单价</th><th>操作</th></tr>
        </thead>
        <tbody id="bookData">

        </tbody>
    </table>
    <div id="showDiv">
        <div id="contentDiv">
            <input type="hidden" id="bookId">
            <img src="" id="bookImg" width="150px" height="150px"><br>
            书名：<span id="nameSpan"></span>
            作者：<span id="authSpan"></span>
            单价：<span id="priceSpan"></span>

            <table border="1" width="80%" cellspacing="0" >
                <thead>
                    <tr><th>评论人</th><th>评论内容</th><th>评论日期</th></tr>
                </thead>
                <tbody id="speakData">

                </tbody>
            </table>
            请输入评论：<input type="text" id="speakContent">
            <input type="button" value="提交" onclick="addSpeak()"><br>
            <input type="button" value="返回" onclick="$('showDiv').style.visibility='hidden'">
        </div>
    </div>
</body>
</html>